<template>
	<div class="hello">
		<child-page v-for="(item, index) in items" :key="index" :index="index" :items="items" @deleteIndex="del" @uploadData="getData"></child-page>
		<!-- <button @click="add">新增一项</button>
	<button @click="ok">完成填写</button> -->
		<div class="ad-button"><u-button type="primary" text="新增一项" @click="add"></u-button></div>
		<div class="ad-button"><u-button type="success" text="完成填写" @click="ok" v-if="items"></u-button></div>
		<div class="ad-button"><u-button type="default" :plain="true" text="取消" @click="cancel"></u-button></div>
	</div>
</template>

<script>
import ChildPage from './ChildPage';
export default {
	data() {
		return {
			items: [{}],
			dataRec: []
		};
	},
	components: {
		ChildPage
	},
	methods: {
		//  add student
		add: function() {
			this.items.push({
				content: '',
				price: '',
				num: '',
				unit: '',
				specifications: ''
			});
		},
		// delete student
		del: function(index) {
			//  not allow to delete the first
			if (index !== 0) {
				this.items.splice(index, 1);
				console.log('deleted:', JSON.stringify(this.items));
			}
		},
		//  get the data from child
		getData: function(val) {
			let index = val.index;
			this.items[index] = val.data;
			console.log('I got the data:', JSON.stringify(this.items));
		},

		ok() {
			var riseListPro = uni.getStorageSync('riseListPro');
			console.log('ris:' + JSON.stringify(riseListPro.content));
			var content = riseListPro.content;
			console.log('content:' + JSON.stringify(riseListPro));
			var me = this;
			var str = '';
			var x = '';
			for (var i = 0; i < me.items.length; i++) {
				var obj = me.items[i];
				console.log('item=' + JSON.stringify(me.items[i]));
				if (obj['content']) {
					str += '详细内容:' + obj['content'] + ' ';
				}
				if (obj['price']) {
					str += '单价:' + obj['price'] + ' ';
				}
				if (obj['num']) {
					str += '数量:' + obj['num'] + ' ';
				}
				if (obj['unit']) {
					str += '单位:' + obj['unit'] + ' ';
				}
				if (obj['specifications']) {
					str += '规格:' + obj['specifications'] + ' ';
				}
				str += '\n';
			}
			console.log('str:' + JSON.stringify(str));
			if (content) {
				riseListPro.content = content + str;
			} else {
				riseListPro.content = str;
			}
			console.log('riseListPro:' + JSON.stringify(riseListPro.content));
			uni.setStorageSync('riseListPro', riseListPro);
			uni.redirectTo({
				url: 'user/scan/billing'
			});
		},
		cancel() {
			uni.redirectTo({
				url: 'user/scan/billing'
			});
		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
page {
	width: 100%;
	height: 100%;
	background-color: #e1e5eb;
}

	.ad-button {
		margin: 10px;
		background: #eeeeee;
	}
</style>
